<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text">
    <button id="btn">发布</button>
    <ul id="list">
        <li>我是谁,我在哪儿? <span>删除</span></li>
        <li>我是谁,我在哪儿? <span>删除</span></li>
        <li>我是谁,我在哪儿? <span>删除</span></li>
    </ul>
</body>
<script>
    // 获取元素 注册事件
    var text = document.getElementById('text');
    var btn = document.getElementById('btn');
    var list = document.getElementById('list');
    // var del = document.getElementById('del');
    btn.onclick = function(){
        // 如果输入框内容为空 停止执行下面代码
        if(text.value == ''){
            alert('请输入正确的内容')
            return;
        }
        // 获取到输入框里面的内容
        var content = text.value;
        // 输出内容
        // console.log(content);
        // 每次发布内容需要先创建一个新的元素
        var li = document.createElement('li');
        // 将发布的内容赋值给新创建的元素
        li.innerHTML = content+'<span>删除</span>';
        // 在旧的元素之前创建
        list.insertBefore(li,list.children[0]);
        // 输入新的内容之后 输入框清空
        text.value = '';
        
    }
    // 获取到所有的删除按钮 使用上下级方法获取到span
    // querySelectorAll 能够使用foreach 方法遍历数组
    var delbtn = document.querySelectorAll('#list span');
    // for(var i = 0; i < delbtn.length; i++){
    //     delbtn[i].onclick = function(){
    //         // console.log(123)
    //         // 使用子元素删除父元素 首先用 子元素.parentNode 获取到父元素
    //         var li = this.parentNode;
    //         // 移除元素
    //         list.removeChild(li)
    //     }
    // }
    delbtn.forEach(function(e,i){
        e.onclick = function(){
            // console.log(123)
            // 移除元素
            list.removeChild(this.parentNode)
        }
    })
    // console.log(delbtn);
    
    // list.addEventListener('click',function(e){
    //     console.log('我被删除了')
    //     if(e.target.nodeName === 'span'){
    //         var li = e.target.nodeName;
    //     list.removeChild(li);
    //     }
    // })
</script>
</html>